<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:a4j="http://richfaces.org/a4j"
                xmlns:rich="http://richfaces.org/rich"
                xmlns:bm="http://localhost:8080/customTags"
                template="layout/template.xhtml">


    <ui:define name="windowTitle">
        #{stock.products}
    </ui:define>s

    <ui:define name="content" id="content">
        <h:form>
            <script type="text/javascript">
                var row;
            </script>
            <!--<rich:contextMenu attached="false" id="menu" submitMode="ajax" oncollapse="row.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'">
                <rich:menuItem value="Edit Record" ajaxSingle="true"
                    oncomplete="#{rich:component('editPanel')}.show()"
                    actionListener="#{dataTableScrollerBean.fetchCurrentRow}">
                    <a4j:actionparam name="vin" value="{carVin}" />
                    <a4j:actionparam name="row" value="{currentRow}" />
                </rich:menuItem>
                <rich:menuItem value="Remove Record" ajaxSingle="true"
                    oncomplete="#{rich:component('deletePanel')}.show()"
                    actionListener="#{dataTableScrollerBean.fetchCurrentRow}">
                    <a4j:actionparam name="vin" value="{carVin}" />
                    <a4j:actionparam name="row" value="{currentRow}" />
                </rich:menuItem>
            </rich:contextMenu>-->
            <a4j:region>
                <rich:dataGrid  id="table" value="#{products.list}" var="dataItem" columns="4" first="1"
                                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.rowBackgroundColor}'" width="100%">

                    <f:facet name="header">
                        <h:outputText value="Product Management" />
                    </f:facet>

                    <rich:panel>
                        <f:facet name="header">
                            <h:outputText value="#{dataItem.name}"></h:outputText>
                        </f:facet>
                        <h:panelGrid columns="2">
                            <h:outputText value="Price:" styleClass="label"></h:outputText>
                            <h:outputText value="#{dataItem.retailPrice}"/>
                            <h:outputText value="Mileage:" styleClass="label"></h:outputText>
                            <h:outputText value="#{dataItem.availability}"/>
                        </h:panelGrid>
                    </rich:panel>
                    <f:facet name="footer">
                        <rich:datascroller></rich:datascroller>
                    </f:facet>
                </rich:dataGrid>
            </a4j:region>
        </h:form>
        <ui:include src="product.xhtml" />
        <ui:include src="deleteProduct.xhtml" />
        <a4j:status onstart="#{rich:component('wait')}.show()"
                    onstop="#{rich:component('wait')}.hide()" />
        <rich:modalPanel id="wait" autosized="true" width="200" height="120"
                         moveable="false" resizeable="false">
            <f:facet name="header">
                <h:outputText value="Processing" />
            </f:facet>
            <h:outputText value="Wait Please..." />
        </rich:modalPanel>
    </ui:define>
</ui:composition>
